<template>
  <div class="order">
    <!-- 搜索 -->
    <SearchBlock ref="searchBlockRef" @clickQuery="clickQuery" @resetSearchCond="resetSearchCond">
      <template #afterButton>
        <hz-button type="success" @click="clickExport">导出</hz-button>
        <hz-button type="success" @click="clickExport" class="export-btn">导入(未开发)</hz-button>
      </template>
    </SearchBlock>

    <my-table ref="tableRef" :tableConfig="tableConfig" @pageChange="clickQuery" >
      <template #action="{ column, record, text, index }">
        <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="关闭" icon="InfoFilled" icon-color="#626AEF"
          v-if="!record.company && (record.state == '已付款' || record.state == '已完成')" 
          title="确定取消该订单吗？" @confirm="clickCancelOrder(record)">
          <template #reference>
            <el-button type="primary" link >取消订单</el-button>
          </template>
        </el-popconfirm>
      </template>
    </my-table>

    <!-- <div class="hx-pagination-box">
      <el-pagination v-model:current-page="page.pageNo" v-model:page-size="page.pageSize" :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="sizeChange"
        @current-change="clickQuery" />
    </div> -->
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, watchEffect, getCurrentInstance } from "vue";
import SearchBlock from "./searchBlock.vue";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const searchBlockRef = ref(null);
const tableRef = ref(null);
// 表格数据
const tableConfig = reactive({
  columns: [
    { label: "取餐序号", prop: "pickingSerialNo" },
    { label: "地址", prop: "supplyAddress" },
    { label: "姓名", prop: "nameTakingMeal" },
    { label: "手机", prop: "phoneTakingMeals", width: 150 },
    { label: "门店名称", prop: "storeName", width: 200 },
    { label: "菜品名称", prop: "nameDishes", width: 400 },
    { label: "备注", prop: "remarks", width: 150 },
    { label: "合作单价", prop: "commodityPrice" },
    { label: "消费金额", prop: "totalPrice" },
    { label: "抽佣金额", prop: "commission" },
    { label: "付款时间", prop: "createTime", width: 180 },
    { label: "合作单价", prop: "commodityPrice" },
    { label: "下单累计次数", prop: "orderCount", width: 120 },
    { label: "状态", prop: "state" },
    { label: "操作", prop: "action", width: 120, scopeVal: true, fixed: 'right' },
  ],
  dataSource: [],
  pageNo: 1,                        // 多层级数据可以直接双向绑定
  pageSize: 10,                      
  total: 0, 
});

// 分页数据
const page = reactive({
  pageSize: 10,
  pageNo: 1,
  total: 0,
  column: 'createTime',
  order: 'desc',
  field: 'id,,,pickingSerialNo,supplyAddress,nameTakingMeal,phoneTakingMeals,storeName,nameDishes,remarks,commodityPrice,totalPrice,commission,createTime,orderCount,state,action',
});

onMounted(() => {
  console.log("onMounted clickQuery");
  clickQuery();
})

// 改变页码
function sizeChange() {
  page.pageNo = 1;
  clickQuery();
}

// 导出
function clickExport() {
  let data = searchBlockRef.value.getSearchCond()
  let selectionRows = tableRef.value.table.getSelectionRows();
  let orderIds = selectionRows.map(val => val.orderId)
  let {pageSize, pageNo, total} = tableConfig
  let param = { 
    ...data, 
    pageSize, 
    pageNo, 
    total, 
    selections: orderIds.join(',') 
  };
  proxy.$http.get('/hc/hcOrderMerchant/platformExportXls', { params: param, responseType: 'blob', returnAll: true }).then(res => {
    proxy.$util.handleExportXls(res.data);
  })
}

// 重置后回调函数
function resetSearchCond() {
  // clickQuery();
}

// 点击查询
function clickQuery(data) {
  if (!data) {
    searchBlockRef.value.clickQuery();
    return;
  }
  let {pageSize, pageNo, total} = tableConfig
  let param = { ...data, pageSize, pageNo, total };
  console.log('clickQuery param:', logObj(param));

  proxy.$http.get('/hc/hcOrderMerchant/list', { params: param, }).then(res => {
    let data = res.result;
    if (data.records instanceof Array) {
      tableConfig.dataSource = data.records;
      page.total = data.total;
      tableConfig.total = data.total;
    } else {
      tableConfig.dataSource = [];
    }
  })
}

// 取消订单
function clickCancelOrder(order) {
  let params = { id: order.id }
  proxy.$http.get('/hc/hcOrderMerchant/cancelOrder', { params }).then(res => {
    if (res.code == 200) {
      clickQuery();
    }
  })
}

</script>
<style lang="scss" scoped>
.revoke.el-button {
  color: #fff;
}

.export-btn {
  margin-left: 12px;
}

@media screen {}
</style>
